<template>
<div id="header-main">
    <div class="menu-main">      
      <div class=menu-item>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#28599d" text-color="azure">
                <div class="title"><h1><a href="/index">JETRON平台DEMO</a></h1></div>
             <el-menu-item index="0">处理中心</el-menu-item>
              <el-menu-item index="2">消息中心</el-menu-item>
               <el-submenu index="3">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
   <!-- <el-menu-item index="5">xxxxx</el-menu-item> -->
          <el-menu-item>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-username">
              <i class="el-icon-user"></i>
              <span>{{ userName }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="updatePsw">修改密码</el-dropdown-item>
              <el-dropdown-item command="quiteLogin">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown></el-menu-item>
        </el-menu>
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="400px">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-col :span="20">
            <el-form-item label="原密码" prop="oldPsw">
              <el-input v-model="ruleForm.oldPsw" type="password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="新密码" prop="newPsw">
              <el-input v-model="ruleForm.newPsw" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <span class="btn">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
          <el-button @click="cancel('ruleForm')">取 消</el-button>
        </span>
      </el-dialog>
      </div>
    </div>
</div>
</template>
<script>
export default{
    data(){
        return{
              activeIndex: '1',
              userName:"xiaoli",
          dialogVisible: false,
        ruleForm: {
        oldPsw: "",
        newPsw: "",
      },
      rules: {
        oldPsw: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newPsw: [{ required: true, message: "请输入新密码", trigger: "blur" }],
      },
        }
    },
     methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleCommand(command){
        if(command=="updatePsw"){
           this.dialogVisible=true
        }
        if(command=="quiteLogin")
        this.$router.push("/")
      },
      cancel(ruleForm) {
      this.dialogVisible = false;
      this.$refs[ruleForm].resetFields();
    },
    submitForm(ruleForm) {
      this.dialogVisible = false;
      this.$refs[ruleForm].resetFields();
      this.$router.push("/");
    },
    }
}
</script>

<style lang="scss" scoped>
#header-main{
    height: 60px;
    .el-menu{
      width: 100%;
    }
  .title{
    margin-left: 20px;
    line-height:60px;
    float: left;
    width: 40%;
    a{
      font-size: 24px;  
      color: azure;
    }
  }
  // .el-dropdown{
  // }
  i{
    color: azure;
  }
  .el-username{
     color: azure;
  }

}
</style>